<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Settings</title>
        <style type="text/css">            
            #logo{
                position: absolute;
                margin-top: -26px;
            }
            #topContent{
                font-size: 25px; 
                /*margin-right: 27px;*/
                margin-top: 2px;
                /*                border-color: green;
                                border-width: 2px;
                                border-style: solid;*/
                text-align: right;
            }
            #topImages{
                /*margin-left: 86%;*/
                margin-top: 2px;
                margin-right: 20px;
                /*                border-color: blue;
                                border-width: 2px;
                                border-style: solid;*/
                text-align: right;
                float: right;
                display: inline;
            }
            #topText{
                /*margin-right: 15%;*/
                margin-top: 5px;
                /*                border-color: red;
                                border-width: 2px;
                                border-style: solid;*/
                text-align: right;
                float: right;
                display: inline;
            }
            #container{
                 border-color: transparent;
                                border-width: 1px;
                                border-style: solid;
                
            }
            #settings{
                margin-left: 15%;
                font-family:Lucida Sans Unicode;
                font-size: 52px;
                margin-top: 30px;
                margin-bottom: 0;
                text-align: center;
            }
            #edituserform{
                margin-left: 30%;
                margin-right: 30%;
                margin-top: 5px;
                text-align: center;
            }
            #submit{
                margin-left: auto;
                margin-right: auto;
            }
            #notification{
                text-align: right;
                margin-right: 20px;
                margin-bottom: 10px;
            }
            .ui-layout, .ui-layout-doc, .ui-layout-unit, .ui-layout-wrap, .ui-layout-bd, .ui-layout-hd{
                border: none;
            }
        </style>
    </h:head>
    <h:body>
        <p:layout fullPage="true">
            <p:layoutUnit position="north" resizable="true" size="150">
                <div id="logo">
                    <p>
                        <h:link outcome="home">
                            <h:graphicImage  value="/images/meteocal2.png" width="30px" height="30px"/>
                            <h style="margin-top: -26px; margin-left:33px ;position: absolute">MeteoCal</h>
                        </h:link>
                    </p>
                </div>
                <div id="topContent">
                    <h:form>
                        <div id="topImages">
                            <h:link outcome="settings">
                                <h:graphicImage  value="/images/settings.png" width="36px" height="36px"/>
                            </h:link>
                            &nbsp;
                            <h:link outcome="findUser">
                                <h:graphicImage  value="/images/findUser.png" width="36px" height="36px"/>
                            </h:link>
                        </div>
                        <div id="topText">
                            <p:commandLink action="#{loginBean.logout()}" value="Logout"/>
                            &nbsp;
                            <h>#{userBean.name}</h>
                            &nbsp;
                        </div>
                    </h:form>
                    <div id="container">
                        <p id="settings">
                            Settings
                        </p>
                    </div>
                </div>
            </p:layoutUnit>
            <p:layoutUnit position="center" resizable="true" size="1000">
                <h:form id="edituserform">
                    <p:panel header="Edit User Form">
                        <h:panelGrid columns="3" id="regGrid">
                            <h:outputLabel for="name">Name:</h:outputLabel>
                            <p:inputText id="name" placeholder="#{userBean.name}" value="#{editUserBean.user.name}">
                                <p:ajax update="namemsg"/>
                            </p:inputText>
                            <p:message id="namemsg" for="name" />
                            
                            <h:outputLabel for="email">Email:</h:outputLabel>
                            <p:inputText id="email" placeholder="#{userBean.email}" value="#{editUserBean.user.email}" readonly="true">
                                <p:ajax update="emailmsg"/>
                            </p:inputText>
                            <p:message id="emailmsg" for="email" />
                            
                            <h:outputLabel for="password">Password:</h:outputLabel>
                            <p:password id="password" value="#{editUserBean.user.password}"
                                        feedback="true" match="pwd2" label="Password"/>
                            <p:message for="password" />
                            
                            <h:outputLabel for="pwd2">Confirm Password:</h:outputLabel>
                            <p:password id="pwd2" label="Confirm Password"/>
                            <br/>
                            <h:outputText value="Calendar Public: " />
                            <p:selectBooleanCheckbox value="#{editUserBean.user.calendar.isPublic}" />
                            
                        </h:panelGrid>
                        <br></br>
                        <p:commandButton id="submit" value="Save Changes" update="regGrid"
                                         action="#{editUserBean.edit()}" />
                        
                    </p:panel>
                    <br></br>
                    <br></br>
                    <p:button outcome="importExport" value="Import/Export Calendar" />
                </h:form>
            </p:layoutUnit> 
            <p:layoutUnit position="south" resizable="true" size="60">
                <div id="notification">
                    <h:link outcome="notifications">
                        <h:graphicImage  value="/images/notification.png" width="40px" height="40px"/>
                    </h:link>
                </div>
            </p:layoutUnit>
        </p:layout>
        
    </h:body>
</html>

